
<template>
  <view class="astigmatism">
    <view class="header">散光测试</view>
    <view class="message-box">
      <view class="left">
        <view class="left-one">
          <view class="name">
            {{ $store.state.name }}
          </view>
          <view class="sex">
            {{ $store.state.sex }}
          </view>
          <view class="class">
            {{ parseClassInfo($store.state.nativeData.class_info || '') }}
          </view>
        </view>
        <view class="school">
          {{ $store.state.school }}
        </view>
      </view>
      <view class="right">
        <view class="item">
          散光检测({{ testStep == 0 ? "左" : "右" }}眼)
        </view>
        <view class="item"> 在{{ distance }}米距离测试 </view>
      </view>
    </view>
    <view class="image-box">
      <view class="image-box2">
        <view class="image-number">
          <image class="image" src="@/static/testDigitalLight.png" mode="aspectFill"></image>
          <view :class="{ switch: true, anim: select }" :style="{
            left: getActiveLeft,
            top: getActiveTop,
          }"></view>
          <view v-for="i in 36" @click="itemClick(i - 1)" :style="{
            left: getNumberleft(i - 1),
            top: getNumberTop(i - 1),
          }" :key="i" :class="{
  number: true,
  select: isActive(i - 1),
  switchnumber: active == i - 1,
}">
            <view class="content">
              {{ i }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="enter-box">
      <view class="content">
        <view class="distance-view">
          <view class="text">测试距离：</view>
          <view class="select" @click="distanceButtonClcik">
            {{ distance }}米
            <view class="span">^</view>
            <view class="select-view" v-show="distanceSelectShow">
              <view class="select-item" @click="distanceButtonItemClcik(item)" v-for="(item, index) in distances"
                :key="index">{{ item }}米
                <view class="span">^</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="enter-but">
        <view v-show="!select" class="enter-select"></view>
        <button @click="buttonClick">确定</button>

      </view>
    </view>
    <Toast ref="toastRef" />
    <Choice ref="choiceRef" />
  </view>
</template>
<script>
import Vue from "vue"
import {
  clientEvent
} from "@/common/index/utils/ClientEvent.js"
import { dagToSinAndCos, exitPage } from "@/common/index/utils/common.js"
import { showToast, choice } from "@/common/index/utils/toast.js"
import { KEY_LEFT, KEY_RIGHT, KEY_UP, KEY_BOTTOM, KEY_ENTER, KEY_BACK } from '@/common/index/config/Event'
import { lastTestAstigmatismResult } from "@/common/index/config/data"
import Toast from '@/components/index/Toast.vue'
import Choice from '@/components/index/Choice.vue'
import {
  toastRef, choiceRef
} from "@/common/index/utils/toast.js"

const display = (message, callback) => {
  const toast = showToast("测试左眼散光完成", "3秒后测试" + message, callback, 3000)
  let i = 3
  let timer = setInterval(() => {
    i--
    toast.content = `${i}秒后测试${message}`
    if (i == 0) {
      clearInterval(timer)
    }
  }, 1000)
}
/**
 * 测试散光页面
 */
export default {
  data() {
    return {
      buttons: [false, false, false, false, false, false, false, false, false,
        false, false, false, false, false, false, false, false, false, false,
        false, false, false, false, false, false, false, false, false, false,
        false, false, false, false, false, false, false],
      leftEye: false,
      rightEye: false,
      number: 36,
      active: 0,
      numberR: 46,
      select: true,
      distance: 5,
      testStep: 0,
      leftResult: [],
      rightResult: [],
      uuid: undefined,
      distances: ['1', '2', '3', '4', '5'],
      distanceSelectShow: false
    }
  },
  watch: {
    active(val) {

      if (val < 0) {
        this.active = val + 36

      } else if (val >= 36) {
        this.active = val - 36
      }
    }

  },
  onLoad({ uuid }) {
    this.uuid = uuid
  },
  created() {
    this.bindEvent()
    this.distance = 5
  },
  components: {
    Toast,
    Choice
  },
  computed: {
    isActive() {
      return (index) => {
        return this.buttons[index]
      }
    },
    getActiveLeft() {
      let dag = this.active / this.number * 360
      let left = (dagToSinAndCos(dag).cos) * this.numberR + 50
      return left + "%"
    },
    getActiveTop() {
      let dag = this.active / this.number * 360
      let top = ((-dagToSinAndCos(dag).sin)) * this.numberR + 50
      return top + "%"
    },
    parseClassInfo() {
      return (info) => {
        let str = ""
        if (info.indexOf("班") != -1) {
          str = info.split("班")[0] + "班"
        } else {
          str = info
        }
        if (str.length >= 9) {
          str = str.substring(0, 7)
        }
        return str;
      }
    }
  },
  onUnload() {
    this.uninstallEvent()
  },
  mounted() {
    toastRef.value = this.$refs.toastRef
    choiceRef.value = this.$refs.choiceRef
    choice("散光检测", ["先测试左眼散光", "你准备好了吗?"], false, undefined, undefined, "准备好了")
  },

  methods: {
    onBackPress() {
      choice("返回登录", "你要退出测试吗？", true, () => toLogin())
    },
    buttonAction(i) {
      this.itemClick(i)
    },
    getNumberleft(i) {
      let dag = i / this.number * 360
      let left = (dagToSinAndCos(dag).cos) * this.numberR + 50
      return left + "%"
    },
    getNumberTop(i) {
      let dag = i / this.number * 360
      let top = ((-dagToSinAndCos(dag).sin)) * this.numberR + 50
      return top + "%"
    },

    left() {
      if (!this.select) return
      let i = this.active + 1
      if (this.i >= this.buttons.length) {
        i = 0
      }
      Vue.set(this, "active", i)
    },

    right() {
      if (!this.select) return
      let i = this.active - 1
      if (i < 0) {
        this.i = this.buttons.length - 1
      }
      Vue.set(this, "active", i)
    },
    top() {
      this.select = !this.select
    },
    bottom() {
      this.select = !this.select
    },
    back() {
      uni.navigateBack({ delta: 1 })
    },
    enter() {
      if (this.select) {
        this.itemClick(this.active)
      } else {
        this.buttonClick()
      }
    },
    setDistance(i) {
      this.distance = i
    },
    itemClick(i) {
      this.buttons[i] = !this.buttons[i]
      if (i > 17) {
        this.buttons[i - 18] = !this.buttons[i - 18]
      } else {
        this.buttons[i + 18] = !this.buttons[i + 18]
      }
      Vue.set(this, "buttons", [...this.buttons])
    },
    _buttonClick() {
      const listToData = () => {
        let arr = []
        for (let i = 0; i < this.buttons.length; i++) {
          if (this.buttons[i]) {
            arr.push(i + 1)
          }
        }
        return arr.join(",")
      }
      if (this.testStep == 0) {
        this.leftResult = listToData()
        this.select = true
        display("右眼散光", () => {
          this.testStep++
          this.buttons = this.buttons.map(() => false)
        })
      } else {
        this.rightResult = listToData()
        this.buttons = this.buttons.map(() => false)
        this.commit()
      }
    },
    buttonClick() {
      choice("提交", ["确定要提交吗？"], true, () => {
        this._buttonClick()
      })
    },
    uninstallEvent() {
      clientEvent.off(KEY_LEFT, this.left, this)
      clientEvent.off(KEY_UP, this.top, this)
      clientEvent.off(KEY_RIGHT, this.right, this)
      clientEvent.off(KEY_BOTTOM, this.bottom, this)
      clientEvent.off(KEY_BACK, this.back, this)
      clientEvent.off(KEY_ENTER, this.enter, this)
    },
    bindEvent() {
      clientEvent.on(KEY_LEFT, this.left, this)
      clientEvent.on(KEY_RIGHT, this.right, this)
      clientEvent.on(KEY_BOTTOM, this.bottom, this)
      clientEvent.on(KEY_UP, this.top, this)
      clientEvent.on(KEY_BACK, this.back, this)
      clientEvent.on(KEY_ENTER, this.enter, this)
    },
    commit() {
      lastTestAstigmatismResult.distance = this.distance
      lastTestAstigmatismResult.left = this.leftResult
      lastTestAstigmatismResult.right = this.rightResult
      if (this.uuid)
        lastTestAstigmatismResult.uuid = this.uuid
      this.uninstallEvent()
      exitPage()
    },
    distanceButtonClcik() {
      this.distanceSelectShow = !this.distanceSelectShow
    },
    distanceButtonItemClcik(i) {
      this.distance = +i
    }
  },
  onShow() {
    toastRef.value = this.$refs.toastRef
    choiceRef.value = this.$refs.choiceRef
  },
}
</script>



<style scoped lang="scss">
.astigmatism {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.image-box {
  margin-top: 7vw;
  height: 80vw;
  position: relative;
  flex-shrink: 0;

  .image {
    width: 65vw;
    height: 65vw;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .image-box2 {
    width: 90vw;
    height: 87vw;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: black;
    border-radius: 10%;

    .image-number {
      width: 78vw;
      height: 78vw;
      text-align: center;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: white;

      .number {
        position: absolute;
        transform: translate(-50%, -50%);
        font-size: 3vw;
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
        transition: 0.3s;

        .content {
          position: absolute;
          transform: translate(-50%, -50%);
          left: 50%;
          top: 50%;
        }
      }

      .select {
        border: 0.4vw solid #00aaff;
      }

      .switchnumber {
        font-size: 3.8vw;
      }

      .switch {
        position: absolute;
        transform: translate(-50%, -50%);
        font-size: 3.4vw;
        width: 5.8vw;
        height: 5.8vw;
        left: 0;
        top: 0;
        border-radius: 50%;
        border: 0.2vw dashed #ff0000;

        transition: 0.1s;
      }

      .anim {
        animation: infinite linear 6s rot;
      }
    }
  }
}

@keyframes rot {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.button-box {
  flex-shrink: 0;
  padding: 0 30px;
  height: 250px;
  width: 100vw;
  // border: 2px dashed black;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);

  .button {
    flex: 1;
    max-width: 10vw;
    width: 10vw;
    height: 98px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 36px;
    text-align: center;
    border: 1px solid rgba(187, 187, 187, 1);
    transition: 0.4s;
  }

  .active {
    background-color: #00aaff;
    color: white;
  }
}

.message-box {
  height: 10vw;
  width: 100vw;
  font-family: "Microsoft YaHei";
  font-style: normal;
  font-weight: 400;
  font-size: 2.4vw;
  line-height: 3.2vw;

  .left {
    width: 32vw;
    min-width: 150px;
    height: 10vw;
    max-width: 40vw;
    float: left;
    border-radius: 0 5vw 5vw 0;
    background-color: #e8e8e8;

    .left-one {
      width: 95%;
      height: 60%;
      padding: 0.5vw 0.5vw;
      padding-top: 1vw;

      .name {
        float: left;
        margin-right: 1.5vw;
      }

      .sex {
        float: left;
      }

      .class {
        float: right;
      }
    }

    .school {
      width: 100%;
      height: 35%;
      padding-left: 15px;
    }
  }

  .right {
    width: 32vw;
    max-width: 40vw;
    line-height: 10vw;
    background-color: #e8e8e8;
    float: right;
    border-radius: 5vw 0 0 5vw;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;

    .item {
      flex: 1;
      line-height: 5vw;
    }
  }
}

.tips {
  height: 20vh;
  padding: 0 10vw;
  font-size: 3vw;
}

.enter-box {
  flex: 1;
  max-height: 30vh;

  display: flex;

  .enter-but {
    flex: 1;
    position: relative;

    button {
      width: 50%;
      height: 10vw;
      color: rgba(16, 16, 16, 1);
      font-size: 3.6vw;
      text-align: center;
      border: 1px solid rgba(187, 187, 187, 1);
      border-radius: 1vw;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .enter-select {
      width: 55%;
      height: 11.5vw;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: .4vw dashed rgb(255, 3, 3);
      border-radius: 10%;
    }
  }

  .content {
    flex: 1.8;
    position: relative;

    .distance-view {
      display: flex;
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 40%;
      width: 30vw;
      height: 8vw;

      .text {
        margin: 3vw 0;
        flex: 1;
        line-height: 100%;
        font-size: 3vw;
      }

      .select {
        margin: 2vw 0;
        flex: 0.8;
        width: 5vw;
        height: 5vw;
        font-size: 3vw;
        padding-left: 1.8vw;
        box-sizing: border-box;
        border: 0.3vw solid #e8e8e8;
        position: relative;

        .span {
          display: block;
          position: absolute;
          transform: translate(-50%, -50%) rotate(90deg);
          left: 77%;
          top: 50%;
        }

        .select-view {
          height: 30vw;
          width: 100%;
          display: flex;
          flex-direction: column;
          position: absolute;
          right: -10vw;
          top: -20vw;
          transition: 0.3s;

          .select-item {
            background-color: white;
            border: 0.2vw solid #e8e8e8;
            flex: 1;

            .span {
              display: block;
              position: absolute;
              transform: translate(-50%, -50%) rotate(90deg);
              left: 77%;
              top: 50%;
            }
          }
        }
      }
    }

    button {
      position: absolute;
      transform: translate(-50%, -50%);
      color: rgba(16, 16, 16, 1);
      font-size: 3.6vw;
      text-align: center;
      border: 1px solid rgba(187, 187, 187, 1);
      border-radius: 1vw;
      height: 10vw;
      transition: 0.3s;
      padding-left: 2vw;
      padding-right: 2vw;
    }

    .button1 {
      left: 30%;
      top: 50%;
    }

    .button2 {
      left: 70%;
      top: 50%;
    }

    .active {
      color: white;
      background-color: #00aaff;
    }
  }
}
</style>
